<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>名片</title>
	<style type="text/css">
	body, html{font-family: PingFangSC-Regular, sans-serif;}
    	body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
		body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
		h1, h2, h3, h4, h5, h6{ font-size:100%; }
		address, cite, dfn, em, var { font-style:normal; }
		code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
		small{ font-size:12px; }
		ul, ol { list-style:none; }
		a { text-decoration:none; }
		a:hover { text-decoration:underline; }
		sup { vertical-align:text-top; }
		sub{ vertical-align:text-bottom; }
		legend { color:#000; }
		fieldset, img { border:0; }
		button, input, select, textarea { font-size:100%; }
		table { border-collapse:collapse; border-spacing:0; }
		.line{
		    width: 100%;
		    height: 10px;
		    background: #f3f3f3;
		}
		.bor_no{
		    border: none!important;
		}
		.red_color{
		    color: #FF4954!important;
		}
		.green_color{
			color: #2CBB45!important;
		}
    	/**{
    		box-sizing: border-box;
    	}*/
    	.bus_header{
    		width: 100%;
    		height: 102px;
    		background: #F7D558;
    	}
    	.close{
    		width: 14px;
    		height: 14px;
    		position: absolute;
    		left: 18px;
    		top: 13px;
    	}
    	.close img{
    		width: 100%;
    		height: 100%;
    		display: block;
    	}
    	.bus_people{
    		display: flex;
    		padding-top: 16px;
    	}
    	.bus_people_head{
    		width: 56px;
    		height: 56px;
    		position: relative;
    		padding-left: 18px;
    	}
    	.bus_people_head img{
    		width: 100%;
    		height: 100%;
    		display: block;
    		border-radius: 100%;
    		overflow: hidden;
    	}
    	.vip{
    		width: 24px;
    		height: 24px;
    		background-image: url("./image/dv.png");
    		background-repeat: no-repeat;;
    		background-size: 100% 100%;
    		position: absolute;
    		right: -2px;
    		bottom: 0;
    	}
    	.bus_people_info{
    		flex: 1
    	}
    	.bus_people_name{

    		box-sizing: border-box;;
    		padding-left: 12px;
    		font-size: 16px;
    		color: #2A2A2A;
    		font-weight: 400;
    	}
    	.bus_people_desc{
    		font-size: 10px;
    		color: #2A2A2A;
    		font-weight: 200;
    		display: flex;
    		width: 100%;
    		box-sizing: border-box;;
    		padding-left: 15px;
    		padding-right: 18px;
    		justify-content: space-between;
    	}
    	.bus_num{
    		font-size: 20px;
    		color: #2A2A2A;
    		font-weight: bold;
    	}
    	.bus_people_desc>div{
    		padding: 0 10px;
    		border-left: 1px solid #E1C353;
    		/*flex: 1*/
    	}
    	.bus_people_desc>div:first-child{
    		border: none;
    		padding-left: 0;
    	}
    	.zhexiantu{
    padding: 18px;
}
.zhexianTab{
    font-size: 12px;
    color: #C3C3C3;
    font-weight: 500;
    margin-bottom: 18px;
    /* display: flex; */
    align-items: center;
	justify-content: space-between;
	height: 30px;
}
.zhexianTab div{
    /* float: left; */
}
.today{
    width: 40%;
    border: 1px solid #f3f3f3;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    margin-right: 20px;
    float: left;
}
.other{
    width: 40%;
    display: flex;
    border: 2px solid #f3f3f3;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
}
.week{
    width: 24%;
    border: 2px solid #f3f3f3;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    float: right;
    border-left: none;
}
.month{
    float: right;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-left: 2px solid #f3f3f3;
    width: 24%;
    border: 2px solid #f3f3f3;
    text-align: center;
    height: 30px;
    line-height: 30px;
    /* border-right: none; */
}
.actives{
    background: #f3f3f3;
    color: #2a2a2a;
}
.bus_title{
	font-size: 14px;
	color: #2A2A2A;
	font-weight: 500;
	padding: 22px 18px 10px 18px;
}
.bus_item{
	padding: 10px 18px 12px 18px;
	border-bottom: 1px solid #DFDFDF;
}
.bus_item_flex{
	display: flex;
	justify-content: space-between;
}
.bus_item_flex>div:first-child{
	width: 55%;
}

.bus_item_flex>div:nth-child(2){
	width: 25%;
}
.bus_item_flex>div:nth-child(3){
	width: 20%;
}
.bus_item_flex img{
	width: 5px;
	height: 7px;
	margin-bottom: 3px;
}
.bus_item_c_one{
	font-size: 13px;
	color: #2A2A2A;
	font-weight: 500;
	padding-bottom: 3px;
}
.bus_item_c_two{
	font-size: 13px;
	color: #2A2A2A;
	font-weight: 300;
}
.bus_item_c_three{
	font-size: 13px;
	font-weight: 300;
}
.bus_item_c_four{
	font-size: 10px;
	color: #6F757C;
	font-weight: 200;
}
.bus_item_c_four span{
	border: 1px solid #CDCDCD;
	padding: 0 3px;
}
 .bus_item_c_five{
	font-size: 10px;
	font-weight: 200;
	color: #6F757C;
}
.bus_item_c_six{
	font-size: 10px;
	font-weight: 200;
	color: #6F757C;
}
.bus_no{
	width: 130px;
	height: 76px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -65px;
	margin-top: 38px;
}
.bus_no img{
	width: 100%;
	height: 100%;
}
.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.2);
    z-index: 99;
    display: none;
}
.msg_box{
    width: 80%;
    min-height: 130px;
    position: absolute;
    left: 50%;
    top: 40%;
    margin-left: -40%;
    z-index: 999;
    background: #fff;
    border-radius: 10px;
    text-align: center;
}
.title{
     height: 40px;
     line-height: 40px;
}
.content{
    padding: 0 18px 50px 18px;
}
.okbtn{
    color: #007bfe;
    height: 40px;
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 40px;
    font-weight: bold;
    border-top: 1px solid #eee;
}
</style>

</head>
<body>
	<div class="businessCard">
		<div class="mask">
            <div class="msg_box">
                <div class="title">提示</div>
                <div class="content"></div>
                <div class="okbtn">确认</div>
            </div>
        </div>
		<div class="bus_header">
			<div class="bus_people">
				<div class="bus_people_head">
					<img src="./image/dhead.png">
					<div class="vip"></div>
				</div>
				<div class="bus_people_info">
					<div class="bus_people_name"></div>
					<div class="bus_people_desc">
						<div>
							<div class="bus_num goods_block_count">0</div>
							<div>藏茶总数</div>
						</div>
						<div>
							<div class="bus_num now_total_value">￥0</div>
							<div>当前总价值</div>
						</div>
						<div>
							<div class="bus_num trade_count">0</div>
							<div>交易次数</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="zhexiantu">
            <div class="zhexianTab">
                <div class="today tab actives">今日</div>
                <!-- <div class="other"> -->
                <div class="week tab">本月</div>
                <div class="month tab">本周</div>
                <!-- </div> -->
            </div>
            <div>
                <div id="container" style="width: 100%;height:200px;"></div>
            </div>
        </div>
        <div class="line"></div>
        <div class="bus_title">
        	Ta的藏茶
        </div>
        <div class="bus_list">
        	<!-- <div class="bus_item">
        		<div class="bus_item_flex">
        			<div class="bus_item_c_one">mini湾</div>
        			<div class="bus_item_c_two">¥89.00</div>
        			<div class="bus_item_c_three red_color">0.09%&nbsp;<img src="./image/jiantouhong.png"></div>
        		</div>
        		<div class="bus_item_flex">
        			<div class="bus_item_c_four"><span>用户持仓量: 9011</span></div>
        			<div class="bus_item_c_five">历史平均</div>
        			<div class="bus_item_c_six">涨幅度</div>
        		</div>
        	</div>
        	<div class="bus_item">
        		<div class="bus_item_flex">
        			<div class="bus_item_c_one">mini湾</div>
        			<div class="bus_item_c_two">¥89.00</div>
        			<div class="bus_item_c_three green_color">0.09%&nbsp;<img src="./image/greendown.png"></div>
        		</div>
        		<div class="bus_item_flex">
        			<div class="bus_item_c_four"><span>用户持仓量: 9011</span></div>
        			<div class="bus_item_c_five">历史平均</div>
        			<div class="bus_item_c_six">涨幅度</div>
        		</div>
        	</div>
        	<div class="bus_item">
        		<div class="bus_item_flex">
        			<div class="bus_item_c_one">mini湾</div>
        			<div class="bus_item_c_two">¥89.00</div>
        			<div class="bus_item_c_three red_color">0.09%&nbsp;<img src="./image/jiantouhong.png"></div>
        		</div>
        		<div class="bus_item_flex">
        			<div class="bus_item_c_four"><span>用户持仓量: 9011</span></div>
        			<div class="bus_item_c_five">历史平均</div>
        			<div class="bus_item_c_six">涨幅度</div>
        		</div>
        	</div>
        	<div class="bus_item">
        		<div class="bus_item_flex">
        			<div class="bus_item_c_one">mini湾</div>
        			<div class="bus_item_c_two">¥89.00</div>
        			<div class="bus_item_c_three red_color">0.09%&nbsp;<img src="./image/jiantouhong.png"></div>
        		</div>
        		<div class="bus_item_flex">
        			<div class="bus_item_c_four"><span>用户持仓量: 9011</span></div>
        			<div class="bus_item_c_five">历史平均</div>
        			<div class="bus_item_c_six">涨幅度</div>
        		</div>
        	</div>
        	<div class="bus_item">
        		<div class="bus_item_flex">
        			<div class="bus_item_c_one">mini湾</div>
        			<div class="bus_item_c_two">¥89.00</div>
        			<div class="bus_item_c_three green_color">0.09%&nbsp;<img src="./image/greendown.png"></div>
        		</div>
        		<div class="bus_item_flex">
        			<div class="bus_item_c_four"><span>用户持仓量: 9011</span></div>
        			<div class="bus_item_c_five">历史平均</div>
        			<div class="bus_item_c_six">涨幅度</div>
        		</div>
        	</div>
        	<div class="bus_item">
        		<div class="bus_item_flex">
        			<div class="bus_item_c_one">mini湾</div>
        			<div class="bus_item_c_two">¥89.00</div>
        			<div class="bus_item_c_three red_color">0.09%&nbsp;<img src="./image/jiantouhong.png"></div>
        		</div>
        		<div class="bus_item_flex">
        			<div class="bus_item_c_four"><span>用户持仓量: 9011</span></div>
        			<div class="bus_item_c_five">历史平均</div>
        			<div class="bus_item_c_six">涨幅度</div>
        		</div>
        	</div> -->
        </div>
        <div class="bus_no" style="display: none;">
        	<img src="./image/no.png">
        </div>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript">
 $(function () {
 	$.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        var line_data = [], weekdata = [], monthdata = [];
        var current = "今日";
        var id = $.getUrlParam('myid');
        var host = $.getUrlParam('myhost');
        var protocol = $.getUrlParam('protocol');
        var part = "";
        $(".okbtn").click(function() {
	        $(".mask").hide()
	    })
	    $('.tab').click(function () {
            line_data = [];
            var i = $(this).index();//下标第一种写法
            $(this).addClass('actives').siblings().removeClass('actives');
            current = $(this).html();
            getData(current);

        });
		getData();

    function getData(current) {
        $.ajax({
            type: 'GET',
            url: protocol + '://' + host +'/tea-repo/users/'+id+'/tea-repo/statistics',
            contentType: 'application/json',
            withCredentials: true,
            dataType: 'json',
            success: function (data) {
            	if(!data.code) {
	            	$(".bus_people_head img").attr("src", data.avatar);
	                $(".bus_people_name").html(data.nickname)
	                $(".now_total_value").html(data.now_total_value)
	                $(".goods_block_count").html(data.goods_block_count)
	                $(".trade_count").html(data.trade_count)
	                if(current == "今日") {
		                for (var i = 0; i < data.today_total_value_data.points.length; i++) {
		                    var point = data.today_total_value_data.points[i];
		                    line_data.push(parseFloat(point.value));
		                }
		            }else if(current == "本周") {
		                for (var i = 0; i < data.current_week_total_value_data.points.length; i++) {
		                    var point = data.current_week_total_value_data.points[i];
		                    line_data.push(parseFloat(point.value));
		                }
		            }else{
		                for (var i = 0; i < data.current_month_total_value_data.points.length; i++) {
		                    var point = data.current_month_total_value_data.points[i];
		                    line_data.push(parseFloat(point.value));
		                }
		            }
	                $('#container').highcharts({
	                    chart: {
	                        height: 200,
	                        type: 'line'
	                    },
	                    title: {
	                        text: ''
	                    },
	                    subtitle: {
	                        text: ''
	                    },
	                    yAxis: {
	                        title: {
	                            text: ''
	                        }
	                    },
	                    credits: {
	                        enabled: false
	                    },
	                    colors: ['#F3F3F3'],
	                    xAxis: {
	                        // categories: ['', '', '', '', '', '', '', '', '', '', '', '']
	                    },
	                    series: [{
	                        name: ' ',
	                        data: line_data
	                    }]
	                }, function (chart) { // on complete
	                    var min = 1000,
	                        max = 0,
	                        pointsToShow = [0, 0],
	                        points = chart.series[0].points;
	                    Highcharts.each(points, function (p) {
	                        if (p.y > max) {
	                            pointsToShow[0] = p.index;
	                            max = p.y;
	                        }
	                        if (p.y < min) {
	                            pointsToShow[1] = p.index;
	                            min = p.y;
	                        }
	                    });
	                    render(chart, points[pointsToShow[0]], '￥');
	                    render(chart, points[pointsToShow[1]], '￥');
	                    //var point = chart.series[0].points[8];
	                });
	                function render(chart, point, text) {
	                    console.log(chart.renderer)
	                    chart.renderer.label(text + ' ' + point.y, point.plotX + chart.plotLeft - 20, point.plotY + chart.plotTop - 45, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
	                        .css({
	                            color: '#fff',
	                            align: 'center',
	                            borderWidth: "5px",
	                            borderColor: "red",
	                            borderStyle: "solid",

	                        })
	                        .attr({
	                            fill: 'rgba(0, 0, 0, 0.75)',
	                            padding: 8,
	                            r: 5,
	                            zIndex: 6,
	                        })
                        .add();
                	}
            	}else{
            		 $(".mask").show();
                	$(".content").html(data.msg)
            	}
            },
            error: function(error) {
	            $(".mask").show();
	            $(".content").html("加载失败")
	            console.log(error)
	        }
        })
    }

	$.ajax({
	    type: 'GET',
	    url: protocol + '://' + host +'/user/'+id+'/products',
	    contentType: 'application/json',
	    withCredentials: true,
	    dataType: 'json',
	    async: false,
	    success: function (data) {
	    	if(!data.code) {
	    		 data.items.forEach(function (i, v) {
                    var img = '', clsname = '';
                    if (i.up_down_percent * 1 > 0) {
                        img = './image/jiantouhong.png';
                        clsname = 'red_color';
                    } else if (i.up_down_percent * 1 < 0) {
                        img = './image/greendown.png';
                        clsname = 'green_color';
                    }
    			    part += 
    			    	'<div class="bus_item">'+
    		        		'<div class="bus_item_flex">'+
    		        			'<div class="bus_item_c_one">'+i.name+'</div>'+
    		        			'<div class="bus_item_c_two">¥'+i.avg_price+'</div>'+
    		        			'<div class="bus_item_c_three '+ clsname +'">'+ i.up_down_percent +'%&nbsp;<img src="'+img+'"></div>'+
    		        		'</div>'+
    		        		'<div class="bus_item_flex">'+
    		        			'<div class="bus_item_c_four"><span>用户持仓量: '+i.user_keep_count+'</span></div>'+
    		        			'<div class="bus_item_c_five">历史平均</div>'+
    		        			'<div class="bus_item_c_six">涨幅度</div>'+
    		        		'</div>'+
    		        	'</div>';
                        // if(i.up_down_percent.indexOf("-") != -1) {
                        //     $(".bus_item_c_three").addClass("red_color")
                        //  }else{
                        //     $(".bus_item_c_three").addClass("green_color")
                        //  }
    				});
				$(".bus_list").append(part)
	    	}else{
	    		 $(".mask").show();
                $(".content").html(data.msg)
	    	}
	      
	    },
	     error: function(error) {
	            $(".mask").show();
	            $(".content").html("加载失败")
	            console.log(error)
	        }
	})   

//     var dddd = {
//     "count": 2,
//     "items": [
//         {
//             "id": "9474f1d53ce64c9ba09ad234202b4863",
//             "user_keep_count": 1,
//             "name": "湾润冬青1号",
//             "brand_name": "湾润号",
//             "last_trade_price": 0.05,
//             "up_down_percent": "-10",
//             "avg_price": 0.05,
//             "logo": "http://ttresource.oss-cn-beijing.aliyuncs.com/handupload/product_logo.png",
//             "is_comment": true,
//         },
//          {
//             "id": "9474f1d53ce64c9ba09ad234202b4863",
//             "user_keep_count": 1,
//             "name": "湾润冬青1号",
//             "brand_name": "湾润号",
//             "last_trade_price": 0.05,
//             "up_down_percent": "10",
//             "avg_price": 0.05,
//             "logo": "http://ttresource.oss-cn-beijing.aliyuncs.com/handupload/product_logo.png",
//             "is_comment": false
//         }
//     ]
// }
// var part1 = '';
// dddd.items.forEach(function (i, v) {
//     var img = '',clsname='';
//     if (i.up_down_percent * 1 > 0) {
//         img = './image/jiantouhong.png';
//         clsname = 'red_color';
//     } else if (i.up_down_percent * 1 < 0) {
//         img = './image/greendown.png';
//         clsname = 'green_color';
//     }
//                     part1 += 
//                         '<div class="bus_item">'
//                             +'<div class="bus_item_flex">'
//                                 +'<div class="bus_item_c_one">'+i.name+'</div>'
//                                 +'<div class="bus_item_c_two">¥'+i.avg_price+'</div>'
// +'<div class="bus_item_c_three '+ clsname +'" >'+ i.up_down_percent +'%&nbsp;<img src="'+ img +'"></div>'
//                             +'</div>'
//                             +'<div class="bus_item_flex">'
//                                 +'<div class="bus_item_c_four"><span>用户持仓量: '+i.user_keep_count+'</span></div>'
//                                 +'<div class="bus_item_c_five">历史平均</div>'
//                                 +'<div class="bus_item_c_six">涨幅度</div>'
//                             +'</div>'
//                         +'</div>';
//                         if(i.up_down_percent.indexOf("-") != -1) {
//                             $(".bus_item_c_three").addClass("red_color")
//                          }else{
//                             $(".bus_item_c_three").addClass("green_color")
//                          }
//                     });
//                     $(".bus_list").append(part1)
//             console.log(part1);
}); 

</script>
</html>














